<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-23 10:15:33
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-06-15 10:28:18
 * @FilePath: \cxl-h5\src\components\dialog\Index.vue
-->
<template>
    <Transition name="fade" mode="out-in" appear>
        <!--  @click.self="onHide" -->
        <section class="dialog-container" v-if="modelValue">
            <section class="dialog-box">
                <section class="dialog-main">
                    <!-- <h1>{{ title }}</h1> -->
                    <!-- 关闭按钮 -->
                    <section class="dialog-close" @click.self="onHide" v-if="showClose"></section>
                    <!-- icon -->
                    <section class="dialog-icon">
                        <template v-if="type === 'submit'">
                            <img src="../../assets/images/icon_sh@3x.png" alt="" />
                        </template>
                        <template v-else-if="type === 'audit'">
                            <img src="../../assets/images/icon_dd@3x.png" alt="" />
                        </template>
                        <template v-else-if="type === 'error'">
                            <img src="../../assets/images/icon_bq@3x.png" alt="" />
                        </template>
                    </section>
                    <!-- 弹窗内容 -->
                    <section class="content">
                        <slot name="content"></slot>
                    </section>
                    <!-- 操作按钮 -->
                    <section class="operation">
                        <slot name="operation"></slot>
                    </section>
                </section>
            </section>
        </section>
    </Transition>
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
const props = defineProps(['modelValue', 'title', 'type', 'showClose'])
const emit = defineEmits(['update:modelValue', 'close'])

//弹窗类型 sumin | audit | error
const type = ref('submit')
const showClose = ref(true)

watchEffect(() => {
    type.value = props.type === undefined ? 'submit' : props.type
    showClose.value = props.showClose === undefined ? true : props.showClose
})

const onHide = () => {
    emit('update:modelValue', false)
    emit('close')
}
</script>
<style scoped lang="scss">
.dialog-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;

    .dialog-box {
        width: 100%;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        padding: 1rem 3rem;
        .dialog-main {
            position: relative;

            border-radius: 0.5rem;
            background-color: #fff;

            box-sizing: border-box;
            padding: calc(var(--cxl-size-72) / 2 + 1rem) 2rem 2rem 2rem;
        }

        .dialog-icon {
            width: var(--cxl-size-72);
            height: var(--cxl-size-72);
            position: absolute;
            top: calc(0rem - var(--cxl-size-72) / 2);
            left: calc(50% - var(--cxl-size-72) / 2);
            img {
                display: block;
                width: 100%;
            }
        }

        .content {
            box-sizing: border-box;
            padding: 0rem 0 1rem 0;
        }

        .dialog-close {
            width: 2rem;
            height: 2rem;
            position: absolute;
            // top: 0.5rem;
            // right: 1rem;
            bottom: -5rem;
            left: calc(50% - 1rem);
            border-radius: 50%;
            border: 2px solid var(--cxl-color-white);

            &::before,
            &::after {
                content: '';
                display: block;
                width: 1rem;
                height: 2px;
                background-color: var(--cxl-color-white);
                position: absolute;
                top: 50%;
                left: 50%;
            }

            &::before {
                transform: translate(-50%, -50%) rotate(-45deg);
            }

            &::after {
                transform: translate(-50%, -50%) rotate(45deg);
            }
        }
    }
}
</style>
